<template>
  <div class="edit-container">
    <van-nav-bar
      title="编辑页面"
      left-text="返回"
      left-arrow
      @click-left="$router.go(-1)"
    />
    <div class="avatar">
      <!-- 头像 -->
      <van-image round fit="cover" :src="userInfo.photo" />
      <!-- 上传头像组件 -->
      <!-- 下面的不要跟分号分开 -->
      <van-uploader :after-read="afterRead" />
    </div>

    <van-cell-group>
      <van-cell
        title="名称"
        :value="userInfo.name"
        is-link
        @click="showDialogClick"
      />
      <van-cell
        title="性别"
        :value="userInfo.gender ? '女' : '男'"
        is-link
        @click="showPopupClick"
      />
      <van-cell
        title="生日"
        :value="userInfo.birthday"
        is-link
        @click="showDatePick = true"
      />
    </van-cell-group>

    <!-- 完成修改姓名框 -->
    <!-- @confirm, 这个组件点击确定后就会执行的事件源 -->
    <van-dialog
      v-model="showDialog"
      title="修改昵称"
      show-cancel-button
      @confirm="updateNickname"
    >
      <!-- 输入任意文本 -->
      <van-field ref="nameFiled" v-model="text" label="请输入昵称" />
    </van-dialog>

    <!-- 修改性别框 -->
    <van-popup v-model="showPopup" position="bottom">
      <van-cell title="男" is-link @click="updateGender(0)" />
      <van-cell title="女" is-link @click="updateGender(1)" />
    </van-popup>

    <!-- 修改生日 -->
    <!-- 修改生日 -->
    <van-popup position="bottom" v-model="showDatePick">
      <van-datetime-picker
        v-model="currentDate"
        type="date"
        title="选择年月日"
        :min-date="minDate"
        :max-date="maxDate"
        @cancel="showDatePick = false"
        @confirm="updateBirthday"
      />
    </van-popup>

    <!-- 图片裁剪盒子 -->
    <!-- 裁剪区域弹窗 -->
    <div class="cropper-box" v-show="showCropper">
      <!-- 裁剪组件 -->
      <vueCropper
        ref="cropper"
        fixed
        autoCropWidth="120"
        autoCropHeight="120"
        autoCrop
        :img="img"
      ></vueCropper>
      <!-- 两个按钮 -->
      <van-button @click="submitPhoto" class="confirm-btn" type="primary"
        >确认</van-button
      >
      <van-button @click="showCropper = false" class="cancel-btn" type="info"
        >取消</van-button
      >
    </div>
  </div>
</template>

<script>
// 导入辅助函数
import { mapState } from 'vuex'
// 导入修改姓名接口
import { editUserInfo, editUserAvatar } from './user.js'
// 导入裁剪插件
import { VueCropper } from 'vue-cropper'
// 导入moment插件
import moment from 'moment'
export default {
  data () {
    return {
      showDialog: false, //通过点击转换 true , false  修改名字
      text: '', //用户输入的文本
      showPopup: false, // 修改性别
      showDatePick: false, // 修改生日弹框
      minDate: new Date(2020, 0, 1), //最早时间
      maxDate: new Date(2025, 0, 1), //最晚时间
      currentDate: new Date(), // 当前选中时间
      showCropper: false, // 是否弹出裁剪图片窗口
      img: '' //要裁剪的图片
    }
  },
  // 这是裁剪插件
  components: {
    VueCropper
  },
  computed: {
    // 辅助函数
    ...mapState(['userInfo'])
  },
  methods: {
    showDialogClick () {
      this.showDialog = true
      // this.$toast.success('修改成功!')
      // 设置输入框文本
      this.text = this.userInfo.name
      // 输入框自动聚焦 , 必须要用官方的
      // 解决方案：nextTick相当于一个高级定时器，会等到vue完成异步渲染后自动执行
      this.$nextTick(() => {
        this.$refs.nameFiled.focus()
      })
    },
    updateNickname () {
      editUserInfo({ name: this.text }).then(res => {
        console.log(res)

        // 更新vuex数据
        this.$store.commit('setuserInfo', {
          ...this.userInfo, //记得待this才能访问
          name: this.text
        })
      })
    },
    showPopupClick () {
      this.showPopup = true
    },
    updateGender (gender) {
      editUserInfo({ gender }).then(res => {
        //记得是对象传参
        console.log(res)
        //(1)弹窗提示
        this.$toast.success('更新成功!')
        // 更新vuex数据
        this.$store.commit('setuserInfo', {
          ...this.userInfo, //记得待this才能访问
          gender: gender
        })
        this.showPopup = false
      })
    },
    // 是修改生日时间的 ,
    updateBirthday () {
      console.log(this.currentDate) //打印当前时间
      // 利用moment 插件完成时间格式转换
      let birthday = moment(this.currentDate).format('YYYY-MM-DD')
      // 利用封装函数 修改 用户生日时间
      editUserInfo({ birthday }).then(res => {
        console.log(res)
        // 轻弹窗
        this.$toast.success('修改成功!')
        // 完成vuex数据更新
        this.$store.commit('setuserInfo', {
          // 先取出本来的数据,在传入,免得被新数据覆盖
          ...this.userInfo,
          birthday
        })
        // g关闭弹窗
        this.showDatePick = false
      })
    },

    // 上传图像, 前提是已经将 uploader 插件弄好, 它会提供 同级图片的 原生的  file.file 编码, 将这个编码;拼接进form里面 , 即可
    afterRead (file) {
      console.log()
      // 创建form外壳
      let fd = new FormData()
      // 将base64 编码 拼接进fd
      fd.append('photo', file.file) //photo是接口要求一起传的
      // 将form表单一起传过去
      editUserAvatar(fd).then(res => {
        console.log(res)
        // 轻弹窗
        this.$toast.success('修改图片成功!')
        // 更新数据
        this.$store.commit('setuserInfo', {
          ...this.userInfo,
          photo: res.data.data.photo
        })
      })
    },

    // 图片的格式分为 file.file , base64 , blob ,这三种

    // // 上传图像 , 这次打开用户图片需要的是base64的编码图片 , 而base64用file.content得到
    afterRead (file) {
      console.log(file)
      // 准备 将需要裁剪的图片交给 cropper插件 , 结构代码中的 img 就是需要裁剪的图片 , 因为file参数就是用户选择的文件信息
      this.img = file.content //将用户图片放进data里的img内
      // 弹出裁剪框
      this.showCropper = true
    },
    // // 上面的是点击图片后的发生的事 , 但裁剪 是不能一同进行的 , 得等用户点击确认后才能进行, 而cropper插件就有提供确认事件

    // // 这次上传的是裁剪过后的图像 , 裁剪插件需要的是blob 格式编码
    submitPhoto () {
      // 获取blob格式图片
      // 获取裁剪图片信息
      this.$refs.cropper.getCropBlob(blob => {
        const fd = new FormData() //获得form表单外皮
        fd.append('photo', blob) // 得到 图片数据
        // 将form表单一起传过去
        editUserAvatar(fd).then(res => {
          console.log(res)
          // 轻弹窗
          this.$toast.success('修改图片成功!')
          // 更新数据
          this.$store.commit('setuserInfo', {
            ...this.userInfo,
            photo: res.data.data.photo
          })
          // 关闭裁剪窗口
          this.showCropper = false
        })
      })
    }
  }
}
</script>

<style lang="less">
.edit-container {
  // 导航条部分
  .van-nav-bar {
    background-color: #3196fa;
    .van-nav-bar__title {
      color: #fff;
    }
    .van-icon-arrow-left {
      color: #fff;
    }
  }
  // 头像部分
  .avatar {
    padding: 20px 0;
    text-align: center;
    .van-image {
      width: 120px;
      height: 120px;
    }
    //文件上传
    .van-uploader {
      opacity: 0;
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      width: 120px;
      height: 120px;
      .van-uploader__upload {
        width: 120px;
        height: 120px;
      }
    }
  }

  // 裁切弹框样式
  .cropper-box {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    .confirm-btn {
      position: absolute;
      left: 0;
      bottom: 0;
    }
    .cancel-btn {
      position: absolute;
      right: 0;
      bottom: 0;
    }
  }
}
</style>
